<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    append-to-body
    top="30px"
    width="1000px"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="项目信息" name="first">
        <info-view :related-data="relatedData"></info-view>
      </el-tab-pane>
      <el-tab-pane label="解保审批表">
        <project-un-view view-mode :query-id="queryId"></project-un-view>
      </el-tab-pane>
      <el-tab-pane label="项目附件" name="file">
        <attach-view
          :query-id="queryId"
          :related-data="relatedData"
          :visible="visible"
        ></attach-view>
      </el-tab-pane>
      <!-- <el-tab-pane label="立项附件">
        <item-attach :related-data="relatedData"></item-attach>
      </el-tab-pane> -->
      <el-tab-pane label="合同信息" name="contract" v-if="+relatedData.is_history !== 1">
        <contract-guard-view :query-id="queryId"></contract-guard-view>
      </el-tab-pane>
      <el-tab-pane label="贷后附件">
        <postloan-attach :query-id="queryId"></postloan-attach>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import AttachView from '@/credit/components/AttachView'
import PostloanAttach from '@/credit/views/city/mission/postloan/PostloanAttach'
import ContractGuardView from '@/credit/views/county/unionProvince/components/ContractGuardView'
import InfoView from '@/credit/views/city/bus/normal/Info'
import ProjectUnView from '@/bigcredit/views/loan/components/un/Main'

export default {
  components: {
    AttachView,
    PostloanAttach,
    // ItemAttach,
    ContractGuardView,
    InfoView,
    ProjectUnView,
  },
  props: {
    visible: Boolean,
    relatedData: Object,
  },
  computed: {
    queryId() {
      return this.relatedData.customer_related_id
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.activeName = 'first'
        this.getContract(this.queryId)
      },
      deep: true,
    },
  },
  data() {
    return {
      activeName: 'first',
      contractLoading: false,
    }
  },
  methods: {
    beforeClose() {
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    async getContract(relatedId) {
      if (!relatedId) return
      this.contractLoading = true
      await this.$utils.promise(
        Promise.all([
          this.$store.dispatch('getEntrustContract', relatedId),
          this.$store.dispatch('getGuardsData', relatedId),
        ])
      )
      this.contractLoading = false
    },
  },
}
</script>

<style></style>
